<template>
  <x-sub-page :isFixBtn="true">
    <div class="pricing-detail" v-loading="pageLoading">
      <div class="form-components">
        <div class="panl-title">
          <span>基础信息</span>
        </div>
      </div>
      <el-descriptions
        direction="vertical"
        :column="4"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="询价单号">{{ dataForm.number | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          selectDictLabel(dictOptions['srm_enquiry.state'], dataForm.state) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item label="询价单标题">{{ dataForm.title | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="采购组织">{{ dataForm.purchaseOrg | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="采购组">{{ dataForm.purchaseTeam | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="货币">{{
          selectDictLabel(dictOptions['currency'], dataForm.currency) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item label="发票要求">{{
          selectDictLabel(dictOptions['srm_enquiry.invoice_type'], dataForm.invoiceType) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item label="付款条件">{{
          selectDictLabel(dictOptions['payment_terms'], dataForm.paymentTerms) | emptyVal
        }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ dataForm.createName | emptyVal }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ dataForm.createTime | emptyVal }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="申请说明"> {{ dataForm.remark | emptyVal }} </el-descriptions-item>
      </el-descriptions>
      <div class="form-components">
        <div class="panl-title">
          <span>询价规则</span>
        </div>
      </div>
      <el-descriptions
        direction="vertical"
        :column="4"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="报价结束时间">{{ dataForm.endDate | emptyVal }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="询价要求"> {{ dataForm.demand | emptyVal }} </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="询价文件">
          <x-upload
            ref="fileUpload"
            :edit-flag="false"
            :limit="9"
            :fileSize="30"
            :span="6"
            :isFileRemark="false"
            :old-file-list="dataForm.srmEnquiryFileList"
            :tips="'最多上传9张，附件大小不超过30MB.'"
          >
          </x-upload>
        </el-descriptions-item>
      </el-descriptions>
      <div class="form-components">
        <div class="panl-title">
          <span>询价物料清单</span>
        </div>
      </div>
      <x-table
        ref="tableCom"
        :isPagination="false"
        :data-source="dataForm.srmEnquiryDetailList"
        :row-key="'id'"
        :height="getTableHeight(dataForm.srmEnquiryDetailList)"
      >
        <el-table-column
          v-for="(item, index) in enquiryMaterialColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <span v-if="item.prop === 'state'">{{
              selectDictLabel(dictOptions['srm_purchase_detail.state'], scope.row[item.prop]) | emptyVal
            }}</span>
            <span v-else-if="item.prop === 'materialUnit'">{{
              selectDictLabel(dictOptions['srm_material.material_unit'], scope.row[item.prop]) | emptyVal
            }}</span>
            <span v-else-if="item.prop === 'deliveryDate'">
              {{ replaceDateTime(scope.row[item.prop]) }}
            </span>
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
      </x-table>
      <div class="form-components">
        <div class="panl-title">
          <span>询价范围</span>
        </div>
      </div>
      <el-descriptions
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="询价范围">
          {{ dataForm.scope === 1 ? '全部自有供应商' : dataForm.scope === 2 ? '符合条件的自有供应商' : '指定供应商' }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        v-if="dataForm.scope === 2"
        direction="vertical"
        :column="1"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item label="供应商注册地区要求">
          {{ scopeAddressInfo.action === 0 ? '不限制' : scopeAddress }}
        </el-descriptions-item>
        <el-descriptions-item label="供应商注册资金要求">
          {{
            scopeRegisterInfo.action === 0
              ? '不限制'
              : `${scopeRegisterInfo.content.registerCapitalFrom}至${scopeRegisterInfo.content.registerCapitalTo}`
          }}
        </el-descriptions-item>
        <el-descriptions-item label="供应商注册行业要求">
          {{ scopeIndustryInfo.action === 0 ? '不限制' : scopeIndustry }}
        </el-descriptions-item>
        <el-descriptions-item label="是否屏蔽供应商">
          {{ scopeExcludeInfo.action === 0 ? '不限制' : '' }}
        </el-descriptions-item>
      </el-descriptions>
      <x-table
        v-if="(dataForm.scope === 2 && scopeExcludeInfo.action === 1) || dataForm.scope === 3"
        ref="tableCom"
        :isPagination="false"
        :data-source="dataForm.scope === 2 ? scopeExcludeInfo.content : scopeIncludeInfo.content"
        :row-key="'id'"
        :height="getTableHeight(dataForm.scope === 2 ? scopeExcludeInfo.content : scopeIncludeInfo.content)"
      >
        <el-table-column
          v-for="(item, index) in enquirySupplierColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <span v-if="item.prop === 'state'">
              {{ selectDictLabel(dictOptions['srm_purchase_detail.state'], scope.row[item.prop]) | emptyVal }}</span
            >
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
      </x-table>
    </div>
    <fixed-btn-area>
      <el-button @click="handleBack"> 返回 </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>

<script>
import { PermissionsMixin, QueryDictMixin, cloneDeep, selectDictLabel, replaceDateTime } from '@package/utils'
import { apiGetEnquiryDetail } from '@/modules/purchaseSearchSource/api/enquiry.js'
import { enquiryMaterialColumns, enquirySupplierColumns } from '@/modules/purchaseSearchSource/config/enquiry.js'
import { EnumApiCode } from '../../../../../../globalEnum.js'

export default {
  name: 'ManagePricingDetail',
  mixins: [PermissionsMixin, QueryDictMixin],
  inject: ['closePages'],
  data() {
    return {
      pageLoading: false,
      enquiryMaterialColumns,
      enquirySupplierColumns,
      srmDictKeys: [
        'srm_enquiry.state',
        'currency',
        'srm_enquiry.invoice_type',
        'payment_terms',
        'srm_material.material_unit'
      ],
      dataForm: {
        title: '',
        realName: '',
        mobile: '',
        remark: '',
        type: '',
        srmEnquiryDetailList: []
      },
      srmEnquiryScopeList: [
        { type: 'Area', action: 0, content: [] },
        {
          type: 'registerCapital',
          action: 0,
          content: {
            registerCapitalFrom: '',
            registerCapitalTo: ''
          }
        },
        { type: 'Industry', action: 0, content: [], industryIds: [] },
        { type: 'exclude', action: 0, content: [] },
        { type: 'include', action: 0, content: [] }
      ],
      scopeAddress: '', // 范围条件地址
      scopeIndustry: '' // 条件行业
    }
  },
  computed: {
    // 供应商注册地区要求相关信息
    scopeAddressInfo() {
      return this.getRelationInfo('Area')
    },
    scopeRegisterInfo() {
      return this.getRelationInfo('registerCapital')
    },
    scopeIndustryInfo() {
      return this.getRelationInfo('Industry')
    },
    scopeExcludeInfo() {
      return this.getRelationInfo('exclude')
    },
    scopeIncludeInfo() {
      return this.getRelationInfo('include')
    }
  },
  watch: {
    'scopeAddressInfo.content': {
      handler(arr) {
        this.scopeAddress =
          arr &&
          arr
            .map((el) => {
              return `${el.province}/${el.city}`
            })
            .join(',')
      },
      deep: true,
      immediate: true
    },
    'scopeIndustryInfo.content': {
      handler(arr) {
        this.scopeIndustry =
          arr &&
          arr
            .map((el) => {
              return `${el.industryCategory}`
            })
            .join(',')
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    const {
      query: { id }
    } = this.$route
    this.getInfo(id)
    this.initDictConfig()
  },
  methods: {
    selectDictLabel,
    replaceDateTime,
    getTableHeight(arr) {
      return (arr?.length || 1) * 42 + 80 || 200
    },
    // 获取详情
    async getInfo(id) {
      this.pageLoading = true
      const { data, code } = await apiGetEnquiryDetail(id)
      this.pageLoading = false
      if (code === EnumApiCode.Success) {
        this.$nextTick(() => {
          this.dataForm = Object.assign(this.dataForm, cloneDeep(data))
          this.srmEnquiryScopeList = this.dataForm.srmEnquiryScopeList.map((item) => {
            return {
              ...item,
              content: JSON.parse(item.scope)
            }
          })
          console.log('this.srmEnquiryScopeList', this.srmEnquiryScopeList)
        })
      }
    },
    // 符合条件的供应商列表或指定供应商 拿相应信息
    getRelationInfo(type) {
      return this.srmEnquiryScopeList.filter((item) => {
        return item.type === type
      })[0]
    },
    handleBack() {
      this.$router.go(-1)
      this.closePages()
    }
  }
}
</script>

<style lang="scss" scoped>
.pricing-detail {
  padding: 0 20px;
  overflow: auto;
  .panl-title {
    height: 45px;
    // margin: 0 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ededed;
    margin-bottom: 16px;
    span {
      display: inline-block;
      height: 22px;
      line-height: 22px;
      color: #171c26;
      border-left: 2px solid #4474f6;
      padding-left: 12px;
      font-size: 16px;
      font-weight: 700;
    }
  }
  ::v-deep .title-style {
    color: #707683;
    font-size: 14px;
  }
  ::v-deep .content-style {
    padding-bottom: 20px;
    color: #333;
    font-size: 14px;
  }
  .table-title {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #707683;
    font-weight: normal;
  }
}
</style>
